<template>
    <div class="content">
        <TableLayout form-title="">
            <el-form :model="formInline" class="formInline" label-width="90px"  slot="form" >          
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="举报人" prop="reportName">
                            <el-input v-model="formInline.reportName" placeholder="请输入举报人姓名" :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col> 
                    
                    <el-col :span="8">
                        <el-form-item label="举报类型">
                           <el-select v-model="formInline.typeReport" style="width:100%" >
                                <el-option v-for="item in dataType" :key="item.typeReportId" :label="item.typeName" :value="item.typeReportId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="状态">
                             <el-select v-model="formInline.typeStatus" style="width:100%" >
                                <el-option v-for="item in statusType" :key="item.typeStatustId" :label="item.statusName" :value="item.typeStatustId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">    
                    <el-col :span="8">
                            <el-form-item label="发布日期">
                                <el-row>  
                                    <el-col :span="11">
                                        <el-date-picker :editable="false" v-model="formInline.startDate" type="date" format="yyyy-MM-dd" placeholder="选择开始日期" :picker-options="formInline.pickerOptions1" @change="dateChange1" style="width:100%">
                                        </el-date-picker>
                                    </el-col>
                                    <el-col :span="2" align="center">至</el-col>
                                    <el-col :span="11">
                                        <el-date-picker :editable="false" v-model="formInline.endDate" type="date" placeholder="选择结束日期" :picker-options="formInline.pickerOptions2"  @change="dateChange2" style="width:100%">
                                        </el-date-picker>
                                    </el-col> 
                                </el-row>             
                            </el-form-item>
                    </el-col>
                </el-row>
                <div class="formBtn">
                    <div class="btnPosition">
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </div>
                </div>
            </el-form>
            <el-table :data="dataApply" style="width: 100%" border @selection-change="handleSelectionChange" v-loading="loading" ref="multipleTable">
                <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>

                <el-table-column label="举报人姓名" align="center" prop="tipName" ></el-table-column>
                
                <el-table-column label="举报类型" align="center">
                    <template scope="scope">
                        <span v-if="scope.row.tipType=='1'">欺诈</span>
                        <span v-if="scope.row.tipType=='2'">色情</span>
                        <span v-if="scope.row.tipType=='3'">政治谣言</span>
                        <span v-if="scope.row.tipType=='4'">诱导分享</span>
                        <span v-if="scope.row.tipType=='5'">恶意营销</span>
                        <span v-if="scope.row.tipType=='6'">虚假消息</span>
                        <span v-if="scope.row.tipType=='7'">收集隐私</span>  
                        <span v-if="scope.row.tipType=='8'">侵权</span> 
                    </template> 
                </el-table-column>

                <el-table-column label="举报模块" align="center" prop="tipModule"></el-table-column>
                
                <el-table-column label="举报内容描述" align="center" prop="tipContent" show-overflow-tooltip></el-table-column>
                
                <el-table-column label="举报时间" align="center" prop="tipTime"> </el-table-column>
                
                <el-table-column label="处理时间" align="center" prop="resloveTime"></el-table-column>

                <el-table-column label="备注" align="center" prop="desc"></el-table-column>

                <el-table-column label="状态" align="center" width="150">
                    <template scope="scope">
                        <span v-if="scope.row.status=='1'">已处理</span>
                        <span v-if="scope.row.status=='2'">待处理</span>
                    </template>                 
                </el-table-column>
               
                <el-table-column align="center" label="操作" width="150">
                    <template scope="scope">
                        <el-button type="text" class="btn-primary" v-if="scope.row.status=='1'">无</el-button>
                        <el-button type="text" class="btn-primary" @click="sigleCloseCms(scope.row)" v-if="scope.row.status=='2'">处理</el-button>                    
                    </template>
                </el-table-column>           
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import {listTip, updateTip} from 'api/reportManage';
import TableLayout from 'components/TableLayout';
import moment from 'moment';
import { mapState, mapActions, mapGetters } from 'vuex';
export default{
    components: {TableLayout},
    data() {
        return {
           
            formInline: {// form表单数据
                reportName: '', // 名字
                typeReport: '0', // 类型
                typeStatus: '0', // 状态
                startDate: '', // 注册开始时间
                endDate: '', // 注册结束时间
                pickerOptions1: {},
                pickerOptions2: {}
            },
            statusType: [
                {
                    typeStatustId: '0',
                    statusName: '请选择'
                },
                {
                    typeStatustId: '1',
                    statusName: '已处理'
                }, 
                {
                    typeStatustId: '2',
                    statusName: '未处理'
                }],
            dataType: [
                {
                    typeReportId: '0',
                    typeName: '请选择'
                },
                {
                    typeReportId: '1',
                    typeName: '欺诈'
                },
                {
                    typeReportId: '2',
                    typeName: '色情'
                },

                {
                    typeReportId: '3',
                    typeName: '政治谣言'
                },
                {
                    typeReportId: '4',
                    typeName: '诱导分享'
                },
                {
                    typeReportId: '5',
                    typeName: '恶意营销'
                },
                {
                    typeReportId: '6',
                    typeName: '虚假消息'
                },
                {
                    typeReportId: '7',
                    typeName: '收集隐私'
                },
                {
                    typeReportId: '8',
                    typeName: '侵权'
                }
            ],
            checked: true,
            dataApply: [],
            dataNum: 1, // 表格1显示条数，初始为1
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            loading: true,
            multipleSelection: []// 列表行数
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid'
        ])
    },
    // 初始化
    created() {
        this.searchFetchData();
        // this.getSchoolType();
    },
    
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 开始日期選擇
        dateChange1(date) {
            this.formInline.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime();
                }
            }
        },
        // 结束日期选择
        dateChange2(date) {
            this.formInline.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime() - 864e5;
                }
            }
        },

        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        },
        // 查询列表
        searchFetchData() {
            let startDate = this.formInline.startDate==''?'':moment(this.formInline.startDate).format('YYYY-MM-DD')+' 00:00:00';// 开始时间格式处理
            let endDate = this.formInline.endDate==''?'':moment(this.formInline.endDate).format('YYYY-MM-DD')+' 23:59:59';// 结束时间格式处理
            listTip(
                this.listQuery.page, 
                this.config.pageSize, 
                this.formInline.reportName, 
                this.formInline.typeReport, 
                startDate, 
                endDate,
                this.formInline.typeStatus
                ).then(response => {              
                    if (response.data.status==200) {
                        this.dataApply = response.data.content.list;
                        this.listQuery.total = response.data.content.pagination.total;
                        this.loading = false;   
                    } else {
                        this.$message({
                            type: 'warning',
                            message: response.data.errorMsg
                        })
                    }
                });
        },
        // 处理
        sigleCloseCms(rows) {
            let roleIds = rows.tipId;
            this.$confirm('确定要处理此条违规信息?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                updateTip('1', roleIds).then(response => {
                    this.searchFetchData();
                    this.$message({
                        type: 'success',
                        message: '处理成功!'
                    })
                });  
            }).catch(e => {       
                //console.log(e);
            });
        },
        // 表单查询
        onSubmit() {
            this.loading = true;
            this.searchFetchData();
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    .el-tag{
            margin-left:5px;
            background:#f9f9f9;
            color:#444;
        }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .footer{
            text-align:center;
            margin-top:40px;
        }
    .footer .el-button{
            padding:10px 40px;
        }
}
section , footer{
    text-align: center
}
section{
    padding-bottom: 50px;
    el-button{
        margin-right: 20px;
    }
}
</style>